<template>
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src" />
  </viewer>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

// Props
const props = defineProps({
  mindMap: {
    type: Object,
    default: null
  }
})

// 响应式数�?
const images = ref([])

// 生命周期钩子
onMounted(() => {
  if (props.mindMap) {
    props.mindMap.on('node_click', onNodeClick)
  }
})

onBeforeUnmount(() => {
  if (props.mindMap) {
    props.mindMap.off('node_click', onNodeClick)
  }
})

// 方法
const onNodeClick = (node, e) => {
  if (e.target.tagName.toLowerCase() === 'img') {
    images.value = [e.target.src]
    setTimeout(() => {
      e.target.click()
    }, 0)
  }
}
</script>

<style></style>
